<template>
    <div class="" :class="is_szzx=='1'?'hidden':'sidebar'">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#2E299B"
            text-color="#FFFFFF" active-text-color="#4940FD" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.user">
                                    {{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import bus from '../common/bus';
    export default {
        data() {
            return {
                collapse: false,
              is_szzx: localStorage.getItem("is_szzx"),
                items: [

                    // {
                    //     icon: 'el-icon-edit-outline',
                    //     index: 'suggest',
                    //     title: '意见反馈'
                    // },
                    {
                        icon: 'el-icon-s-home',
                        index: 'home',
                        title: '首页'
                    },
                    {
                        icon: 'el-icon-s-tools',
                        index: 'verification',
                        title: '核验管理'
                    },
                    {
                        icon: 'el-icon-s-ticket',
                        index: 'digitalcertificate',
                        title: '数字凭证'
                    },
                    {
                        icon: 'el-icon-upload',
                        index: 'present',
                        title: '上报呈送',
                        subs: [{
                                icon: 'el-icon-upload',
                                index: 'month',
                                title: '月报'
                            },
                            {
                                icon: 'el-icon-upload',
                                index: 'season',
                                title: '季报'
                            },
                        ],
                    },

                    {
                        icon: 'el-icon-s-data',
                        index: 'databigscreen',
                        title: '数据大屏'
                    },
                    {
                        icon: 'el-icon-user-solid',
                        index: 'resident',
                        title: '居民管理'
                    },
                    {
                        icon: 'el-icon-lx-people',
                        index: 'user',
                        title: '人员管理'
                    },
                    {
                        icon: 'el-icon-lx-service',
                        index: 'permission',
                        title: '权限管理'
                    },
                ]
            };
        },
        computed: {
      
            onRoutes() {
                return this.$route.path.replace('/', '');
            }
        },
        created() {
            var userPermissions = JSON.parse(localStorage.getItem('userPermissions'));
            // console.log('查看数据')
            // console.log(userPermissions)
            var menu = [];
            this.items.forEach(function (item) {
                userPermissions.forEach(function (perm) {
                    // console.log(perm.permissionCode);
                    if (perm.permissionCode == item.index) {
                        menu.push(item);
                    }
                });
            });
            this.items = menu;
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapse = msg;
                bus.$emit('collapse-content', msg);
            });
        }
    };
</script>

<style scoped lang="scss">
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }
    .hidden{
      display: none;
    }
    .sidebar1 {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 200px;
    }

    .sidebar>ul {
        height: 100%;
    }

    .sidebar-el-menu .el-menu-item i {
        color: #FFFFFF;
    }

    .sidebar-el-menu .el-menu-item:hover {
        background: #FFFFFF !important;
        color: #4940FD !important;

        i {
            color: #4940FD !important;
        }
    }

    .sidebar-el-menu .el-submenu__title:hover {
        background: #FFFFFF !important;
        color: #4940FD !important;
    }

    .sidebar-el-menu .el-menu-item.is-active i {
        color: #4940FD;
    }

    .sidebar-el-menu .el-menu-item.is-active {
        background: #FFFFFF !important;
        color: #4940FD;
    }

    .sidebar-el-menu .el-submenu__title.is-active {
        background: #FFFFFF !important;
        color: #4940FD;
    }
    .el-submenu__title i{
        color: #FFFFFF;
    }
</style>